<template>
	<div class="mapbox">
		<iframe
			:src="`${VUE_APP_BASE_ROUTER}map/ZJF_fin.html`"
			ref="mapRef"
		/>
		<div class="operate">
			<img
				v-show="route.query.geojson"
				:src="require('./image/location.png')"
				alt=""
				@click="panToHouse"
			/>
			<img
				:src="require('./image/map_model.png')"
				alt=""
				@click="changePattern"
			/>
			<img
				:src="require('./image/buildig_list.png')"
				alt=""
				@click="toList"
			/>
		</div>

		<van-popup v-model:show="visible" position="bottom" round closeable>
			<component
				:is="buildingItem"
				:details="currentHouse"
			/>
		</van-popup>
	</div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import buildingItem from './components/buildingItem'
import { Toast } from 'vant'

const route = useRoute()
const router = useRouter()
const mapRef = ref(null)
const mapPattern = ref('addTDT_img')
const VUE_APP_BASE_ROUTER = ref(process.env.VUE_APP_BASE_ROUTER)

const currentHouse = ref({})
const visible = ref(false)


const receiveMsg = e => {
	let obj = e.data
	// 地图交互消息监听
	if (obj.type === 'gisMapMessage') {
		if (obj.data.key === 'initInfo' && obj.data.value) {
			// init
				panToHouse()
		} else if (obj.data.key === 'tdtLoad' && obj.data.value) {
			// getLocation()
		}
	} else if(obj.type === 'gisLayerMessage') {
		if (obj.data.key === 'localInfo' && obj.data.value) {
			// localInfo交互 --- 当前定位完成
		} else if (obj.data.key === 'polygonInfo' && obj.data.value) {
			currentHouse.value = obj.data.value.polygonInfo
			visible.value = true
		}
	}
}

const sendMessage = (type, data) => {
	mapRef.value.contentWindow.postMessage({
		type: type,
		data: data
	}, '*')
}

const toList = () => {
	router.back()
}

const changePattern = () => {
	mapPattern.value = mapPattern.value === 'addTDT_img' ? 'addTDT_vec' : 'addTDT_img'
	let message = {
		key: mapPattern.value,
		value: { isSelect: true }
	}
	sendMessage('gisLayerMessage', message)
}

const panToHouse = () => {
	if (!route.query.geojson) {
		Toast('没有查到房屋数据！')
		return
	}
	let message = {
		key: 'panToByGeo',
		value: { geo: JSON.parse(route.query.geojson) }
	}
	sendMessage('gisLayerMessage', message)
}

onMounted(() => {
	if (window.addEventListener) {
		window.addEventListener('message', receiveMsg, false)
	} else {
		window.attachEvent('message', receiveMsg)
	}
})

onBeforeUnmount(() => {
	if (window.addEventListener) {
		window.removeEventListener('message', receiveMsg, false)
	} else {
		window.detachEvent('message', receiveMsg)
	}
})
</script>

<style scoped lang="less">
.mapbox {
	height: 100%;
	:deep(.building-item) {
		box-shadow: none;
		margin: 0;
		padding-top: 80px;
		.title {
			img {
				display: none;
			}
		}
		.item {
			display: none;
			&:nth-of-type(2) {
				display: flex;
			}
			&:nth-of-type(3) {
				padding-bottom: 32px;
				display: flex;
			}
			&:nth-of-type(6)  {
				display: flex;
			}
		}
	}
	iframe {
		width: 100%;
		height: 100%;
		border: 0;
		background: transparent;
	}
	.operate {
		img {
			position: fixed;
			&:nth-of-type(1) {
				width: 80px;
				height: 80px;
				left: 32px;
				bottom: 64px;
			}
			&:nth-of-type(2) {
				right: 32px;
				bottom: 64px;
				width: 112px;
				height: 112px;
			}
			&:nth-of-type(3) {
				right: 32px;
				bottom: 184px;
				width: 112px;
			}
		}
	}
}
</style>
